<template>
  <div class="page_body">
    <HomeTop :topTitle="topTitle"></HomeTop>
    <div class="page_list">
      <div class="listBOx" v-if="teamList.length">
        <div v-for="(item, index) in teamList" :key="index">
          <div
            :class="Index == item.id ? 'lists' : 'list'"
            @click="one(item.id)"
          >
            <div class="list_img">
              <img class="img" :src="item.image_path" alt="" />
            </div>
            <div class="list_intro">
              <div class="list_intro_one">
                <div class="list_name">{{ item.name }}</div>
                <div class="list_number">队伍人数 {{ item.amount }}人</div>
              </div>
              <div class="list_intro_tow">
                <van-button
                  class="oper"
                  plain
                  type="info"
                  @click="operate(item.id)"
                ></van-button>
                <van-button
                  plain
                  type="info"
                  class="dele"
                  @click="deletebut(item.id)"
                ></van-button>
              </div>
            </div>
          </div>
        </div>
        <div style="height: 1.8rem"></div>
      </div>
      <div class="listEmpty" v-else>
        <div class="emptyBox">
          <img
            class="empty_img"
            src="../../assets/image/empty_icon01.png"
            alt=""
          />
          <div class="empty_title">暂无队伍</div>
        </div>
      </div>
      <div class="page_bottombut">
        <div class="createBtn" @click="editTeam()">编辑队伍</div>
        <div class="createBtn" @click="addTeam()">创建队伍</div>
      </div>
      <van-dialog
        v-model="show"
        title="你确定要删除该球队吗"
        width="5.2rem"
        :showConfirmButton="true"
        :closeOnClickOverlay="true"
        :show-cancel-button="true"
        @confirm="deleteconfirm()"
      >
      </van-dialog>
    </div>
  </div>
</template>

<style src="../../assets/css/game/chooseTeam.css" scoped></style>

<script>
import HomeTop from "@/components/homeTop.vue";
// import { Router } from "express";
import { Checklist } from "mint-ui";
import { Toast, Indicator } from "mint-ui";
import { Button, Dialog } from "vant";
export default {
  name: "addMember",
  components: {
    HomeTop,
    Checklist,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      topTitle: "球队信息", // 顶部组件参数设置
      optionValue: true,
      teamList: [],
      Index: "",
      teamid: "",
      show: false,
      romid: "",
    };
  },
  created() {
    this.getTeamList();
  },

  methods: {
    goApply() {
      if (this.Index == "") {
        Toast({
          message: "请选择队伍",
          duration: 3000,
        });
      } else {
        this.$router.push({
          name: "teamMassage",
          query: {
            id: this.Index,
          },
        });
      }
    },
    operate(id) {
      this.teamid = id;
      // console.log(this.teamid);
      sessionStorage.setItem("teamid", this.teamid); //报名操作时存的队伍id
      this.$router.push({
        name: "teamMassage",
        query: {
          name: "teamList",
        },
      });
    },
    //删除队伍
    deletebut(id) {
      this.romid = id;
      this.show = true;
    },
    deleteconfirm() {
      let url = "/mobile/deleteTeam";
      let data = {
        team_id: this.romid,
      };
      // Indicator.open();
      this.axios.post(url, data).then((res) => {
        if (res.code == 0) {
          // Indicator.close();
          this.getTeamList();
        } else {
          Toast({
            message: res.msg,
            duration: 3000,
          });
        }
      });
    },

    one(index) {
      this.Index = index;
      console.log(this.Index, "0999");
    },
    addTeam() {
      this.$router.push({
        name: "createTeam",
        query: {
          name: "teamList",
        },
      });
    },
    editTeam() {
      if (this.Index == "") {
        Toast({
          message: "请选择可编辑队伍",
          duration: 3000,
        });
      } else {
        this.$router.push({
          name: "editteam",
          query: {
            index: this.Index,
          },
        });
      }
    },

    getTeamList() {
      let id = sessionStorage.getItem("event_id");
      if (id) {
        let url = "/mobile/teamList";
        let data = {
          event_id: sessionStorage.getItem("event_id"),
        };
        Indicator.open();
        this.axios
          .post(url, data)
          .then((res) => {
            Indicator.close();
            if (res.code == 0) {
              this.teamList = res.team;
              //   console.log(res, "2222");
            } else {
              Toast({
                message: res.msg,
                duration: 3000,
              });
            }
          })
          .catch(function (error) {
            Indicator.close();
            console.log(error);
          });
      }
    },
  },
};
</script>
<style scoped>
.van-button {
  height: 30px;
}
.oper {
  background: url("../../assets/image/guanl.png") no-repeat;
  background-size: 80% 80%;
  border: none;
}
.dele {
  background: url("../../assets/image/sancu.png") no-repeat;
  background-size: 70% 70%;
  border: none;
  margin-left: 0.2rem;
}
</style>
